
import { useEffect, useState } from 'react'
import { JumboTabs, Toast,ErrorBlock } from 'antd-mobile'
import userStore from '@/store/userStore'
import { getArticles } from '@/api/home'
import { GET_TOKEN } from '@/utils/token'
import Clist from './list'

const Home = () => {
  const [switchList, setSwitchList] = useState<string[]|undefined>([])
  const { channelList, token,index,setIndex } = userStore()

 useEffect(() => { toGetSwirchList(index) }, [])

  const toGetSwirchList = async (e: string) => {
    setSwitchList(undefined)
    let i=Number(e)
   
    setIndex(i)
   
    let result = await getArticles({ channel_id: i })
    if (result && result.status == 200) {
      setSwitchList(result.data.data.results)
    } else {
      Toast.show({
        icon: 'fail',
        content: '获取文章失败！',
      })
    }
  }
  function nullOrEmpty(){
    if(channelList){
      console.log("y")
      return (<ErrorBlock fullPage  status='disconnected' />)
    }else{
      return(<p>加载中</p>)
    }
  }
  return (
    <>

      {channelList.length>0 ?
      // index要求字符串格式，而我之前把他转成number了
        <JumboTabs  onChange={ (e)=>toGetSwirchList(e) } activeKey={`${index}`}>

          {channelList.map(item => (<JumboTabs.Tab  title={item.name} description='' key={item.id}>
            {
              switchList?.length>0 ?
              <>
                {/* <ul> */}
                  {/* {switchList.map(item => (<li key={item.id}>{item.title}</li>))} */}
                {/* </ul>  */}
                <Clist data={switchList}></Clist>
              </>
                :<ErrorBlock fullPage status='empty' />
              
            }
          </JumboTabs.Tab>))}

        </JumboTabs>
        :  nullOrEmpty
      }

    </>
  )
}
export default Home